<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>margin 折叠</title>
		<style type="text/css">
			/* 
				垂直外边距折叠-相邻的垂直方向外边距会发生重叠现象
				具体有以下三种取值方式：
				以其中较大的值为准（同为正值）
				取和（一正一负）
				以其中绝对值较大的为准（同为负值）
			*/
			.box1 {
				width: 100px;
				height: 100px;
				margin-bottom: 100px;
			}

			.box2 {
				width: 100px;
				height: 100px;
				margin-top: -70px;
			}
		</style>
	</head>
	<body>
		<div class="box1" style="background: #ffaa7f;"></div>
		<div class="box2" style="background: #ddff92;"></div>
	</body>
</html>
